<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>奔跑的小熊</title>
    <style>
        body {
            animation: yanse 8s linear infinite;
            background-color: blanchedalmond;
        }
        
        @keyframes yanse {
            0% {
                background-color: skyblue;
            }
            20% {
                background-color: rgb(226, 123, 123);
            }
            40% {
                background-color: rgb(120, 100, 211);
            }
            60% {
                background-color: rgb(214, 157, 51);
            }
            80% {
                background-color: rgb(35, 172, 81);
            }
            100% {
                background-color: rgb(95, 7, 95);
            }
        }
        
        .baise {
            position: absolute;
            height: 336px;
            width: 100%;
            background-image: url(./bg1.png);
            animation: baise 10s linear infinite;
            margin: 150px auto;
        }
        
        @keyframes baise {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -3840px 0;
            }
        }
        
        .heise {
            position: absolute;
            height: 336px;
            width: 100%;
            background-image: url(./bg2.png);
            animation: heise 10s linear infinite;
        }
        
        @keyframes heise {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -3840px 0;
            }
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            25% {
                left: 10%;
            }
            50% {
                left: 25%;
            }
            75% {
                left: 40%;
            }
            100% {
                left: 50%;
                margin-left: -100px;
            }
        }
        
        .bear {
            position: absolute;
            top: 350px;
            width: 200px;
            height: 100px;
            background-image: url(./bear.png);
            background-repeat: no-repeat;
            animation: bear 1s steps(8) infinite, move 4s linear forwards;
        }
    </style>
</head>

<body>
    <div class="heise"></div>
    <div class="baise"></div>

    <div class="bear"></div>
</body>

</html>